動畫:出現、消失、彈跳、縮放、脈衝、可變顏色和替換 SF Symbols (指南)
出現/消失 Appear/Disappear
當提示使用者新增功能時使用出現動畫
當某個元素已被刪除或移除時使用消失動畫
彈跳 Bounce
快速、有彈性般的運動,模擬物體彈跳。
提供互動成功的反饋
強化符號試圖傳達的概念,增強符號的趣味性
可以營造一種活力感,使符號更具互動性和吸引力
這個亮度滑動控制元件(從左到右提升亮度)當滑塊滑動到最右側是發生彈動動畫,提供視覺反饋來表達螢幕已達到最大亮度
縮放Scale
模擬物理按鈕行為,提供操作確認的反饋。放大後恢復原狀提供互動確認的反饋,縮小後恢復原狀模擬按下效果。
當滑鼠懸停在資料夾按鈕上時,會增大符號尺寸,這樣有助於將使用者的焦點放在符號上,當移動到下一個符號上時,同樣的動畫發生,使用者的視焦會從資料夾轉移到列表
在彈動和縮放之間如何選擇呢?
彈跳強調動作已經發生或需要被髮生的資訊
縮放是在使用者選擇一個專案時提供焦點和反饋
脈衝Pulse
透過改變透明度提供持續變化的效果。
透過符號內多圖層的動態變化傳達符號概念,提供更清晰和準確的正在進行效果。
在FaceTime案例中可以看到脈衝增強了螢幕共享中的概念
可變顏色Variable Color
可變色強調了符號不同強度的變化和隨時間變化的狀態。
包含兩種表達方式:累計和逐步
累計體現出一層層的增減過程,用於表達啟動時的wifi狀態
逐步突出一層接一層的動畫順序,每次只高亮一層,表達wifi搜尋可用訊號的過程
頂部狀態列中的wifi運用了逐步動畫,圖層返回並重新開始,直至中斷
替換Replace
一個符號被另外符號替換,透過符號的變化來表達功能的變化。
向下/向上 設計時只需要確定替換與被替換的關係,符號A向下移動並消失,符號B向上浮現,形成了兩個符號之間平滑的過
向上\向上,符號A向上移動,從視野中消失緊接著符號B以穩定的向上運動浮現,這種形式的動畫以流暢的方式表達了天氣的變化
透過播放鍵點選後快速替換為暫停鍵,來表達暫停是下一個可用動作
當我們選中hello字元時右邊的兩個圖示瞬間被替換,有助於使用者去理解選中字元後的下一步有哪些可執行的操作